import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './index.css';

function Example() {
  const [showMessage, setShowMessage] = useState(false);
  return (
    <div>
      <button
        onClick={() => setShowMessage(true)}
        size="lg"
      >
        Show Message
      </button>
      <CSSTransition
        in={showMessage}
        timeout={300}
        classNames="alert"
        unmountOnExit
      >
        <div style={{border:"1px solid black",backgroundColor:"red"}}>
          <p>
            This alert message is being transitioned in and
            out of the DOM.
          </p>
          <button onClick={() => setShowMessage(false)}>
            return
          </button>
        </div>
      </CSSTransition>
    </div>
  );
}

export default Example;